<template>
    <div class="app-container" ref="appContainer">

        <!-- ------------表格--------------->
        <div class="header">
            <el-form :inline="true" class="search-form" :model="selectDate" ref="ruleFormRef">
                <el-form-item label="请输入派分ID">
                    <el-input v-model="inputSearch.searchId" :placeholder="`请输入派分ID`" clearable />
                </el-form-item>
                <el-form-item label="请输入得分ID">
                    <el-input v-model="inputSearch.toId" :placeholder="`请输入得分ID`" clearable />
                </el-form-item>
                <el-form-item label="">
                    <el-date-picker v-model="selectDate[0]" type="datetime" placeholder="开始时间">
                    </el-date-picker>
                    &nbsp&nbsp&nbsp至&nbsp&nbsp&nbsp
                    <el-date-picker v-model="selectDate[1]" type="datetime" placeholder="结束时间">
                    </el-date-picker>
                </el-form-item>
            </el-form>
            <div class="search">
                <el-button type="primary" @click="onclickSearch" :icon="Search">搜索</el-button>
            </div>
        </div>

        <div class="table">

            <el-table v-loading="loading" :data="list" fit highlight-current-row style="width: 100%" show-summary
                :border="true">
                <el-table-column label="id" align="center" prop="id" width="125px">
                </el-table-column>
                <el-table-column label="呢称" align="center" prop="nick" width="125px">
                </el-table-column>
                <el-table-column label="分数" align="center" prop="score" width="125px">
                </el-table-column>
                <el-table-column label="发分用户" align="center" prop="uid" width="125px">
                </el-table-column>
                <el-table-column label="得分用户" align="center" prop="tid" width="125px">
                </el-table-column>


            </el-table>

        </div>


    </div>
</template>
<script lang="ts" setup name="comprehensive">
import { GameConfig } from '@/config/GameConfig'
import { HttpClient } from '@/utils/HttpClient'
import { UIHelper } from '@/utils/UIHelper'
import { now } from 'lodash'
import { Search } from '@element-plus/icons-vue'
import { ref, onMounted, reactive } from 'vue'
import { Logger } from '@/engine/util/Logger'
import { Base64 } from 'js-base64'

let form = ref({ touzi1: '1', touzi2: '1' })
const loading = ref(false)
let nowDate: Date = new Date()
const inputSearch = reactive({
    searchId: '',
    toId: "",
})

const selectDate = ref([
    new Date(nowDate.getFullYear(), nowDate.getMonth(), nowDate.getDate() - 1),
    new Date(nowDate.getFullYear(), nowDate.getMonth(), nowDate.getDate() + 1)
])

let list = reactive([
    {

    }
])



onMounted(() => {

    onclickSearch()
})

const onclickSearch = () => {
    Logger.log("onclickSearch=", selectDate)
    let startTime: number = Math.floor(selectDate.value[0].getTime() / 1000)
    let endTime: number = Math.floor(selectDate.value[1].getTime() / 1000)
    let uid: number = parseInt(inputSearch.searchId)
    if (isNaN(uid)) {
        uid = 0;
    }
    let toId: number = parseInt(inputSearch.toId)
    if (isNaN(toId)) {
        toId = 0
    }
    HttpClient.get_log_score(startTime, endTime, uid, toId, (dataList: Array<object>) => {
        list.splice(0)
        for (let i = 0; i < dataList.length; i++) {
            let data: object = {
                "id": dataList[i]["id"],
                "nick": Base64.decode(dataList[i]["nick"]),
                "score": dataList[i]["score"],
                "uid": dataList[i]["uid"],
                "tid": dataList[i]["tid"],
            }
            list[i] = data
        }

    })
}

</script>
          
<style scoped lang="scss">
.header {
    display: flex;
    padding: 16px 16px 0 16px;
    margin-bottom: 16px;
    border-radius: 4px;
    background: white;
    box-shadow: 0 0 12px rgb(0 0 0 / 5%);

    .search-form {
        flex: 1;

        ::v-deep {
            .el-input--default {
                width: 200px;
            }
        }
    }

    .search {
        flex-shrink: 0;
        white-space: nowrap;
    }
}
</style>
          